<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		button {
     	 padding: 10px 15px;
     	 font-size: 16px;
    	}
    	input {
    	 padding: 10px;
     	 font-size: 16px;
      	 width: 200px;
   		}
   		.active{
   			background: orange;
   		}
	</style>
</head>
<body>
	<!-- onclick 点击事件 -->
	<!-- <div onclick="fn()">787788778</div> -->

	<div>
		<button onclick="up()">+</button>
  		<input type="text" value="8">
  		<button onclick="down()">-</button>
	</div>

	<div>
		<p class="active">段落一</p>
		<p>段落一</p>
		<p>段落一</p>
	</div>

	<div>
		<input type="text" class="who">
    	<button onclick="chose()">天选之子</button>
	</div>
	<script type="text/javascript">
	// 	let div = document.querySelector("div")
	// 	function fn(){
	// 		div.style.background = "red"
	// 	}

		//1.
		 let inp = document.querySelector("input")

    	 function up() {
     	 inp.value++
    	};

   		 function down() {
   		 	if (inp.value > 0) {
   		 		inp.value--
   		 	}
    	};
    	
    	//2.
    	let p = document.querySelectorAll("p")
    	for(let i = 0; i < p.length; i++){
    		//给每一个p标签绑定点击事件
    		p[i].onclick = function(){
    			console.log(i)
    			//每次加类名之前，先清空上一次的active
    			document.querySelector(".active").className = ""
    			p[i].className = "active"
    		}
    	}

    	//3
    	let arr = ["熊大", "熊二", "光头强", "吉吉国王"]
    	let xuan = document.querySelector(".who")
    	function chose(){
    		//0--1随机数 3
    		console.log(Math.random() * arr.length)
    		let num = parseInt(Math.random() * arr.length)
    		xuan.value = arr[num]
    	}
	 </script>
</body>
</html>